<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{ margin:0; padding:0;}
	#wrap{ width:360px; margin:40px auto;}
	#wrap div{ width:100%; float:left;}
	#head ul li{  width:45px; float:left; list-style:none;}
</style>
</head>
<script>
	
</script>
<body>
<div id="wrap">
	<div id="head">
    <ul>
    	<li>视频</li>
    	<li>资讯</li>
    	<li>体育</li>
    	<li>汽车</li>
    	<li>时尚</li>
    	<li>军事</li>
    	<li>游戏</li>
    	<li>房产</li>
    </ul>
    </div>
    <div>
    	<img src="images/p1.jpg" id="photo">
    </div>
</div>
</body>
</html>
<script>
    var lis=document.querySelectorAll("li")
    var photo=document.querySelector("#photo");
    for (var i = 0; i < lis.length; i++) {
		lis[i].index=i;
		lis[i].onmouseover=function(){
			photo.src="images/p"+this.index+".jpg"
		}		
	}
</script>